<template>
  <view class="login-box">
    <view class="title">
      请输入邮箱密码后登录
    </view>
    <u--form labelPosition="left" :model="loginFormData" :rules="rules" ref="loginForm">
      <u-form-item label="邮箱" prop="email" borderBottom>
        <u--input v-model="loginFormData.email" border="none"></u--input>
      </u-form-item>
      <u-form-item label="密码" prop="password" borderBottom>
        <u--input v-model="loginFormData.password" border="none"></u--input>
      </u-form-item>
      <view class="btn-submit">
        <u-button type="primary" text="登录" @click="submit"></u-button>
      </view>

    </u--form>
  </view>

</template>

<script>
  import {
    userLogin
  } from '@/api/user/index.js';
  import {
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        loginFormData: {
          email: '',
          password: ''
        },
        rules: {
          email: {
            type: 'string',
            required: true,
            message: '请填写邮箱',
            trigger: ['blur', 'change']
          },
          password: {
            type: 'string',
            max: 16,
            required: true,
            message: '请填写密码',
            trigger: ['blur', 'change']
          },
        },
      };
    },
    methods: {
      ...mapActions([
        'Login',
      ]),
      async submit() {
        const res = await this.$refs.loginForm.validate()
        if (res) {
          /* 这里仅用来演示登录，所以密码没有做加密处理，实际开发中请根据需求选择加密方式 */
          await this.Login(this.loginFormData)
          uni.$u.route({
            type: 'tab',
            url: '/pages/index/my/index'
          })
        }

      }
    },
  };
</script>

<style lang="scss" scoped>
  .login-box {
    padding: 40px 30px 0;

    >.title {
      font-size: 24px
    }

    .btn-submit {
      margin-top: 30px;
    }
  }
</style>